<template>
	<view class="detail-wrapper">
		<view class="detail-title">{{ title }}</view>
		<view class="detail-date">{{ date }}</view>
		<view class="detail-image-content">
			<image class="detail-image" :src="image" mode="widthFix" @click="viewBigImg"></image>
			<button class="detail-share-btn" open-type="share" @click.stop="share">
				<u-icon class="detail-share-icon" name="share" size="48" color="#fe6b9b"></u-icon>
			</button>
		</view>
		<view class="detail-remark u-font-12">
			*图片素材均来自于网络，如有侵权，请联系管理员进行删除
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			image: '',
			date: ''
		};
	},
	methods: {
		viewBigImg() {
			uni.previewImage({
				urls: [this.image],
				current: 0
			});
		},
		share() {
			const { title, date, image } = this;
			console.log({ title, date, image });
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: image,
				title: title,
				miniProgram: {
					id: this.$mz.yuanshiId,
					path: `pages/detail/detail?title=${title}&image=${image}&date=${date}`,
					type: 1
				},
				success(ret) {
					console.log(ret);
				},
				fail(err) {
					console.log(err);
				}
			});
		}
	},
	onLoad(params) {
		// console.log(params);
		Object.assign(this, params);
	},
	// 分享
	onShareAppMessage(res) {
		const { title, date, image } = this;
		if (res.from === 'button') {
			// 来自页面内分享按钮
			// console.log(res.target);
		}
		return {
			title: this.title,
			imageUrl: this.image,
			path: `pages/detail/detail?title=${title}&image=${image}&date=${date}`
		};
	}
};
</script>

<style scoped="scss">
.detail-wrapper {
	width: calc(100vw-40rpx);
	padding: 20rpx;
}
.detail-text {
	color: #333;
	font-size: 36rpx;
	line-height: 2;
}
.detail-date {
	color: #999;
	font-size: 32rpx;
	line-height: 2;
}
.detail-image-content {
	text-align: center;
	margin: 10rpx 0;
	position: relative;
}
.detail-share-btn {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	outline: none;
	display: inline;
	background: rgba(0, 0, 0, 0.1);
}
.detail-share-btn:after {
	content: ' ';
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border: none !important;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	box-sizing: border-box;
	border-radius: 10px;
}
.detail-share-icon {
}
.detail-image {
	width: 100%;
}
.detail-remark {
	text-align: right;
	color: #999;
}
</style>
